<script lang="ts" setup>
import { debounce } from "@pureadmin/utils";
import * as echarts from "echarts";
import { defineProps, onMounted, onUnmounted, ref, watchEffect } from "vue";
const props = defineProps<{
  data: any;
}>();
const chartRef = ref();
const getPieValue = () => {
  // return `${(Number(props.data) * 100).toFixed(2)}${unit}`;
  return Number(props.data.loadRate).toFixed(2);
};
const charts = ref([]);
let myChart = null;
const init = () => {
  if (!chartRef.value) {
    return;
  }
  const num = getPieValue();
  if (!myChart) {
    myChart = echarts.init(chartRef.value);
  }
  const option = {
    animation: charts.value.length === 0,
    tooltip: {
      show: false
    },
    legend: {
      show: false
    },
    series: [
      {
        type: "pie",
        radius: ["80%", "100%"],
        center: ["50%", "50%"],
        startAngle: 180,
        endAngle: 360,
        label: {
          show: false
        },
        labelline: {
          show: false
        },
        emphasis: {
          disabled: true
        },
        data: [
          {
            value: num,
            itemStyle: {
              color: "#2174FF"
            }
          },
          {
            value: 100 - num,
            itemStyle: {
              color: "rgba(86, 108, 145, 1)"
            },
            selected: false
          }
        ]
      }
    ]
  };
  option && myChart.setOption(option);
  if (!charts.value.includes(myChart)) {
    charts.value.push(myChart);
  }
};
// 处理窗口大小变化
const handleResize = debounce(() => {
  charts.value.forEach(chart => {
    chart.resize();
  });
}, 60);
watchEffect(() => {
  init();
});
onMounted(() => {
  window.addEventListener("resize", handleResize);
});
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  charts.value.forEach(chart => {
    chart.dispose();
  });
});
</script>
<template>
  <div class="w-100">
    <div class="chart-container">
      <div ref="chartRef" class="chart-pie"></div>
      <div class="chart-content">
        <div class="chart-content-pre">
          <div>
            <span class="content-pre-num">{{ data.loadRate || "-" }}</span
            ><sub class="content-pre-unit">{{ data.loadRateUnit || "%" }}</sub>
          </div>
          <div class="content-pre-name">负载率</div>
        </div>
      </div>
      <div class="chart-range"><span>0%</span><span>100%</span></div>
    </div>
    <div class="dk-info">
      <div class="mainName">{{ data.mainName }}</div>
      <px-row class="flex-row" :gutter="8">
        <px-col :span="12" class="flex-row">
          <div class="dk-info-name type1">总功率</div>
          <div class="lh-10">
            <span class="dk-info-num">{{ data?.power?.toLocaleString() }}</span
            ><span class="dk-info-unit">{{ data.powerUnit }}</span>
          </div>
        </px-col>
        <px-col :span="12" class="flex-row">
          <div class="dk-info-name">频率</div>
          <div class="lh-10">
            <span class="dk-info-num">{{ data?.frequency?.toLocaleString() }}</span
            ><span class="dk-info-unit">{{ data.frequencyUnit }}</span>
          </div>
        </px-col>
      </px-row>
      <px-row class="flex-row" :gutter="8">
        <px-col :span="12" class="flex-row">
          <div class="dk-info-name type1">电流</div>
          <div class="lh-10">
            <span class="dk-info-num">{{ data?.current?.toLocaleString() }}</span
            ><span class="dk-info-unit">{{ data.currentUnit }}</span>
          </div>
        </px-col>
        <px-col :span="12" class="flex-row">
          <div class="dk-info-name">电压</div>
          <div class="lh-10">
            <span class="dk-info-num">{{ data?.voltage?.toLocaleString() }}</span
            ><span class="dk-info-unit">{{ data.voltageUnit }}</span>
          </div>
        </px-col>
      </px-row>
      <px-row class="flex-row" :gutter="8">
        <px-col :span="12" class="flex-row">
          <div class="dk-info-name type1">功率因数</div>
          <div class="lh-10">
            <span class="dk-info-num">{{ data?.powerFactor?.toLocaleString() }}</span
            ><span class="dk-info-unit">{{ data.powerFactorUnit }}</span>
          </div>
        </px-col>
        <px-col :span="12" class="flex-row">
          <div class="dk-info-name">温度</div>
          <div class="lh-10">
            <span class="dk-info-num">{{ data?.temperature?.toLocaleString() }}</span>
            <span class="dk-info-unit">℃</span>
          </div>
        </px-col>
      </px-row>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.chart-container {
  width: 128rpx;
  position: relative;
  margin: 0 auto;
  .chart-content-pre {
    width: 98rpx;
    height: 49rpx;
    padding-top: 6rpx;
    text-align: center;
    background-image: url("/ifp-web-static/image/all/leadScreenNew/dkPieBg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    .content-pre-num {
      font-size: 20rpx;
      font-family: AlibabaPuHuiTiM;
      color: #2ba471;
      line-height: 27rpx;
      text-shadow: 0px 2prx 4rpx rgba(0, 0, 0, 0.51);
      background: linear-gradient(180deg, #ffffff 0%, #aab6b1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .content-pre-unit {
      font-size: 14rpx;
      font-family: AlibabaPuHuiTiM;
      color: rgba(255, 255, 255, 0.6);
      line-height: 20rpx;
      bottom: 0;
    }
    .content-pre-name {
      font-size: 12rpx;
      font-family:
        PingFangSC-Regular,
        PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      line-height: 14rpx;
    }
  }
  .chart-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .chart-range {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 10rpx;
    font-family:
      PingFangSC-Regular,
      PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    line-height: 14rpx;
    padding: 0;
    padding-top: 70rpx;
  }
}
.chart-pie {
  width: 128rpx;
  height: 128rpx;
  position: absolute;
  top: 0;
  left: 0;
}
.dk-info {
  width: 100%;
  padding: 0 8rpx;
  margin-top: 3rpx;
  // position: absolute;
  // bottom: 0;
  // left: 0;
}
.flex-row {
  display: flex;
  align-items: center;
}
.w-100 {
  width: 100%;
}
.dk-info-name {
  width: 20px;
  font-size: 10px;
  font-family:
    PingFangSC-Regular,
    PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 10rpx;
  margin-right: 6px;
  margin-bottom: 8rpx;
  flex-shrink: 0;
  &.type1 {
    width: 40rpx;
  }
}
.dk-info-num {
  font-size: 10px;
  font-family: AlibabaPuHuiTiM;
  color: #3cb1fb;
  line-height: 8rpx;
}
.lh-10 {
  line-height: 8rpx;
  margin-bottom: 8rpx;
}
.dk-info-unit {
  font-size: 8px;
  font-family:
    PingFangSC-Regular,
    PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  line-height: 8rpx;
}
.mainName {
  width: 171rpx;
  height: 18rpx;
  margin: 0 auto;
  margin-bottom: 2rpx;
  font-size: 12rpx;
  font-family: AlibabaPuHuiTiM;
  color: rgba(255, 255, 255, 0.9);
  line-height: 18rpx;
  text-align: center;
  background-image: url("/ifp-web-static/image/all/leadScreenNew/xbt.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
</style>
